<template>
  <div class="risk app-container">
    <div class="infos" v-show="detailShow">
      <div class="material-top">
        <div class="material-title"><span :class="{ change: active }" @click="handelChange(1)">用户详情</span> <span :class="{ change: !active }" @click="handelChange(2)">登录日志</span></div>
        <el-button type="primary" color="#fff" @click="goBack" :dark="isDark" :icon="ArrowLeft">返回</el-button>
      </div>
      <div>
        <el-container>
          <el-aside width="200px">
            <div>
              <el-icon><User /></el-icon>
            </div>
            <div>1800000</div>
            <div v-if="loanInfo.custName == '李四'" style="margin-left: 10px">金牌</div>
            <div v-if="loanInfo.custName == '张三22'" style="margin-left: 10px">银牌</div>
            <div>信用等级</div>
            <div>信用分：90</div>
          </el-aside>
          <el-main>
            <table cellspacing="0">
              <tr>
                <td class="tr-left">用户ID</td>
                <td class="tr-right">{{ loanInfo.id }}</td>
                <td class="tr-left">注册时间</td>
                <td class="tr-right"></td>
              </tr>
              <tr>
                <td class="tr-left">姓名</td>
                <td class="tr-right">{{ loanInfo.custName }}</td>
                <td class="tr-left">身份证号</td>
                <td class="tr-right">{{ loanInfo.certNumber }}</td>
              </tr>
              <tr>
                <td class="tr-left">性别</td>
                <td class="tr-right">{{ loanInfo.sex }}</td>
                <td class="tr-left">教育程度</td>
                <td class="tr-right">{{ loanInfo.education }}</td>
              </tr>
              <tr>
                <td class="tr-left">年龄</td>
                <td class="tr-right">{{ loanInfo.age }}</td>
                <td class="tr-left">生日</td>
                <td class="tr-right"></td>
              </tr>
              <tr>
                <td class="tr-left">籍贯</td>
                <td class="tr-right">{{ loanInfo.homeRegion }}</td>
                <td class="tr-left">现居住地址</td>
                <td class="tr-right">{{ loanInfo.homeDetail }}</td>
              </tr>
              <tr>
                <td class="tr-left">个人年收入</td>
                <td class="tr-right">{{ loanInfo.yearIncome }}</td>
                <td class="tr-left">用户来源</td>
                <td class="tr-right">微信</td>
              </tr>
            </table>
          </el-main>
        </el-container>
      </div>
      <el-row>
        <el-col :span="8" :offset="8">
          <el-button type="info" @click="goNext">查看完整档案>></el-button>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="23"
          ><el-icon class="colIcon" size="18"><List /></el-icon> 统计信息</el-col
        >
      </el-row>
      <el-table v-loading="loading" :data="statisticsList" @selection-change="handleSelectionChange">
        <el-table-column label="担保金额" align="center" prop="jobId" />
        <el-table-column label="担保笔数" align="center" prop="jobName" :show-overflow-tooltip="true" />
        <el-table-column label="待还金额" align="center" prop="jobGroup" />
        <el-table-column label="最高担保金额" align="center" prop="invokeTarget" :show-overflow-tooltip="true" />
        <el-table-column label="逾期次数" align="center" prop="cronExpression" :show-overflow-tooltip="true" />
        <el-table-column label="逾期金额" align="center" prop="status" :show-overflow-tooltip="true"> </el-table-column>
        <el-table-column label="按时还款率" align="center" prop="cronExpressiona" :show-overflow-tooltip="true" />
        <el-table-column label="登录次数" align="center" prop="cronExpressionb" :show-overflow-tooltip="true" />
      </el-table>
      <el-row>
        <el-col :span="23"
          ><el-icon class="colIcon" size="18"><List /></el-icon> 银行卡信息</el-col
        >
      </el-row>
      <el-table v-loading="loading" :data="bankList" @selection-change="handleSelectionChange">
        <el-table-column label="账户类型" align="center" prop="jobId" />
        <el-table-column label="账户户名" align="center" prop="jobName" :show-overflow-tooltip="true" />
        <el-table-column label="银行开户行" align="center" prop="jobGroup" />
        <el-table-column label="银行开户地" align="center" prop="invokeTarget" :show-overflow-tooltip="true" />
        <el-table-column label="支行名称" align="center" prop="cronExpression" :show-overflow-tooltip="true" />
        <el-table-column label="银行账号" align="center" prop="status" :show-overflow-tooltip="true"> </el-table-column>
        <el-table-column label="确认银行账号" align="center" prop="cronExpressiona" :show-overflow-tooltip="true" />
        <el-table-column label="使用状态" align="center" prop="cronExpressionb" :show-overflow-tooltip="true">
          <template #default="scope">
            <el-switch disabled v-model="scope.row.statust" active-value="0" inactive-value="1"></el-switch>
          </template>
        </el-table-column>
      </el-table>
      <el-row>
        <el-col :span="23"
          ><el-icon class="colIcon" size="18"><List /></el-icon> 担保记录</el-col
        >
      </el-row>
      <el-table v-loading="loading" :data="loanList" @selection-change="handleSelectionChange">
        <el-table-column label="担保编号" align="center" prop="jobId" />
        <el-table-column label="申请日期" align="center" prop="jobName" />
        <el-table-column label="用户账号" align="center" prop="jobGroup" />
        <el-table-column label="申请额度" align="center" prop="invokeTarget" :show-overflow-tooltip="true" />
        <el-table-column label="担保产品" align="center" prop="cronExpression" :show-overflow-tooltip="true" />
        <el-table-column label="期限" align="center" prop="status" :show-overflow-tooltip="true"> </el-table-column>
        <el-table-column label="审批金额" align="center" prop="cronExpressiona" :show-overflow-tooltip="true" />
        <el-table-column label="担保来源" align="center" prop="aa" :show-overflow-tooltip="true" />
        <el-table-column label="担保状态" align="center" prop="ss" :show-overflow-tooltip="true" />
        <el-table-column label="操作" align="center" prop="cronExpressionb" :show-overflow-tooltip="true">
          <template #default="scope">
            <el-button link type="primary" @click="goPay(scope.row)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total > 0" :total="total" v-model:page="page_count" v-model:limit="page_size" />
    </div>
    <!-- <fullt @pevBack="pevBack" v-show="!detailShow" ref="fullts" /> -->
  </div>
</template>
<script setup name="Info">
import { ArrowLeft } from "@element-plus/icons-vue";
import { getPerDetail, getPerMaintain } from "@/api/guarantee";
import { ref } from "vue";
const { proxy } = getCurrentInstance();
import fullt from "./fullt.vue";
const isDark = ref(null);
const fullts = ref();
const active = ref(true);
const loanInfo = ref({});
const detailShow = ref(true);
const statisticsList = ref([
  { jobId: "¥200000.00", jobName: "10", jobGroup: "¥25000.00", invokeTarget: "¥80000.00", cronExpression: "0", status: "0.00", cronExpressiona: "100%", cronExpressionb: "10" },
]);
const bankList = ref([
  {
    jobId: "收款银行",
    jobName: "张静",
    jobGroup: "招商银行",
    invokeTarget: "广东省深圳市南山区",
    cronExpression: "科苑路支行",
    status: "6225555555555555",
    cronExpressiona: "6225555555555555",
    statust: "0",
  },
  {
    jobId: "还款银行",
    jobName: "张静",
    jobGroup: "中国银行",
    invokeTarget: "广东省深圳市南山区",
    cronExpression: "科苑路支行",
    status: "6225555555555555",
    cronExpressiona: "6225555555555555",
    statust: "1",
  },
  {
    jobId: "收款银行",
    jobName: "张静",
    jobGroup: "广东华兴银行",
    invokeTarget: "广东省深圳市南山区",
    cronExpression: "科苑路支行",
    status: "6225555555555555",
    cronExpressiona: "6225555555555555",
    statust: "0",
  },
  {
    jobId: "还款银行",
    jobName: "张静",
    jobGroup: "包商银行",
    invokeTarget: "广东省深圳市南山区",
    cronExpression: "科苑路支行",
    status: "6225555555555555",
    cronExpressiona: "6225555555555555",
    statust: "1",
  },
]);
const loanList = ref([
  {
    jobId: "202307196398345",
    jobName: "2023-07-19 14:48:38",
    jobGroup: "18000000000",
    invokeTarget: "￥50000.00",
    cronExpression: "薪悦贷",
    status: "12",
    cronExpressiona: "￥50000.00",
    aa: "微信订单",
    ss: "还款中",
    cronExpressionb: "查看详情",
  },
  {
    jobId: "202307196398345",
    jobName: "2023-07-19 14:48:38",
    jobGroup: "18000000000",
    invokeTarget: "￥50000.00",
    cronExpression: "薪悦贷",
    status: "12",
    cronExpressiona: "￥50000.00",
    aa: "微信订单",
    ss: "还款中",
    cronExpressionb: "查看详情",
  },
  {
    jobId: "202307196398345",
    jobName: "2023-07-19 14:48:38",
    jobGroup: "18000000000",
    invokeTarget: "￥50000.00",
    cronExpression: "薪悦贷",
    status: "12",
    cronExpressiona: "￥50000.00",
    aa: "微信订单",
    ss: "还款中",
    cronExpressionb: "查看详情",
  },
  {
    jobId: "202307196398345",
    jobName: "2023-07-19 14:48:38",
    jobGroup: "18000000000",
    invokeTarget: "￥50000.00",
    cronExpression: "薪悦贷",
    status: "12",
    cronExpressiona: "￥50000.00",
    aa: "微信订单",
    ss: "还款中",
    cronExpressionb: "查看详情",
  },
  {
    jobId: "202307196398345",
    jobName: "2023-07-19 14:48:38",
    jobGroup: "18000000000",
    invokeTarget: "￥50000.00",
    cronExpression: "薪悦贷",
    status: "12",
    cronExpressiona: "￥50000.00",
    aa: "微信订单",
    ss: "还款中",
    cronExpressionb: "查看详情",
  },
  {
    jobId: "202307196398345",
    jobName: "2023-07-19 14:48:38",
    jobGroup: "18000000000",
    invokeTarget: "￥50000.00",
    cronExpression: "薪悦贷",
    status: "12",
    cronExpressiona: "￥50000.00",
    aa: "微信订单",
    ss: "还款中",
    cronExpressionb: "查看详情",
  },
  {
    jobId: "202307196398345",
    jobName: "2023-07-19 14:48:38",
    jobGroup: "18000000000",
    invokeTarget: "￥50000.00",
    cronExpression: "薪悦贷",
    status: "12",
    cronExpressiona: "￥50000.00",
    aa: "微信订单",
    ss: "还款中",
    cronExpressionb: "查看详情",
  },
  {
    jobId: "202307196398345",
    jobName: "2023-07-19 14:48:38",
    jobGroup: "18000000000",
    invokeTarget: "￥50000.00",
    cronExpression: "薪悦贷",
    status: "12",
    cronExpressiona: "￥50000.00",
    aa: "微信订单",
    ss: "还款中",
    cronExpressionb: "查看详情",
  },
  {
    jobId: "202307196398345",
    jobName: "2023-07-19 14:48:38",
    jobGroup: "18000000000",
    invokeTarget: "￥50000.00",
    cronExpression: "薪悦贷",
    status: "12",
    cronExpressiona: "￥50000.00",
    aa: "微信订单",
    ss: "还款中",
    cronExpressionb: "查看详情",
  },
  {
    jobId: "202307196398345",
    jobName: "2023-07-19 14:48:38",
    jobGroup: "18000000000",
    invokeTarget: "￥50000.00",
    cronExpression: "薪悦贷",
    status: "12",
    cronExpressiona: "￥50000.00",
    aa: "微信订单",
    ss: "还款中",
    cronExpressionb: "查看详情",
  },
  {
    jobId: "202307196398345",
    jobName: "2023-07-19 14:48:38",
    jobGroup: "18000000000",
    invokeTarget: "￥50000.00",
    cronExpression: "薪悦贷",
    status: "12",
    cronExpressiona: "￥50000.00",
    aa: "微信订单",
    ss: "还款中",
    cronExpressionb: "查看详情",
  },
  {
    jobId: "202307196398345",
    jobName: "2023-07-19 14:48:38",
    jobGroup: "18000000000",
    invokeTarget: "￥50000.00",
    cronExpression: "薪悦贷",
    status: "12",
    cronExpressiona: "￥50000.00",
    aa: "微信订单",
    ss: "还款中",
    cronExpressionb: "查看详情",
  },
  {
    jobId: "202307196398345",
    jobName: "2023-07-19 14:48:38",
    jobGroup: "18000000000",
    invokeTarget: "￥50000.00",
    cronExpression: "薪悦贷",
    status: "12",
    cronExpressiona: "￥50000.00",
    aa: "微信订单",
    ss: "还款中",
    cronExpressionb: "查看详情",
  },
]);
const loading = ref(false);
const value1 = ref(true);
const router = useRouter();
const labelPosition = ref("right");
const total = ref(10);
const page_count = ref(1);
const page_size = ref(10);
const route = useRoute();
const formLabelAlign = reactive({
  name: "",
  region: "",
  type: "",
});

/** 返回 */
function goBack() {
  // router.go(-1);//access
  proxy.$tab.closeOpenPage("access");
}
function pevBack() {
  detailShow.value = true;
}
function handelChange(id) {
  if (id == 1) {
    active.value = true;
  } else {
    active.value = false;
  }
}
/*点击跳转**/
function goNext() {
  // router.push('info')
  // detailShow.value = false;
  // console.log(fullts.value, "fullts.value");
  // fullts.value.getDetail();
  // proxy.$tab.closeOpenPage('full')

  if (route.query.type == "1") {
    router.push({ path: "public-corporate", query: { id: route.query.id } });
  } else {
    router.push({ path: "personal", query: { id: route.query.id } });
  }
}
function handleSelectionChange(selection) {
  ids.value = selection.map((item) => item.jobId);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}
function goPay() {
  router.push("/after-loan/pay");
}

function getDetail() {
  console.log(22222, route.query.id);
  getPerDetail(route.query.id).then((res) => {
    console.log(res, "详情");
    if (res.code == 200) {
      // loanInfo.value = res.data;
      // frontUrl.value = "http://116.228.78.26:52800/nymanagerFile/" + loanInfo.value.frontIdcard;
      // versoUrl.value = "http://116.228.78.26:52800/nymanagerFile/" + loanInfo.value.reverseIdcard;
      // versoList.value.push(versoUrl.value);
      // frontList.value.push(frontUrl.value);
    }
  });
}

// async function getList() {
//   const data = await getPerDetail(route.query.id);
//   console.log(data, "详情");
//   if (data.code == 200) {
//     loanInfo.value = data.data;
//   }
// }

// onMounted(() => {
//   setTimeout(() => {
//   });
// });
// getList();
getDetail();
</script>
<style lang="scss" scoped>
.material-title {
  font-size: 15px;
  font-weight: bold;
  span {
    display: inline-block;
    border: 1px solid #e4e4e4;
    padding: 5px;
    cursor: pointer;
  }
}
.change {
  background: #333;
  color: #fff;
}
.material-top {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #ddd;
}
.infos {
  :deep(.el-aside) {
    text-align: left;
    background: #f9fafc;
    padding-left: 60px;
    border-radius: 0px;
    border: 1px solid #e4e4e4;
    margin: 0;
    div {
      &:first-child {
        width: 60px;
        height: 60px;
        border-radius: 30px;
        text-align: center;
        line-height: 60px;
        background: #ebebeb;
        color: #fff;
        font-size: 18px;
      }
    }
  }
}
:deep(.el-container) {
  padding-top: 5px;
  margin-bottom: 20px;
}
:deep(.el-main) {
  padding: 0;
  font-size: 16px;
}
.tr-left {
  width: 125px;
  text-align: right;
  padding-right: 10px;
  background: #f9fafc;
}
.tr-right {
  padding-left: 10px;
  width: 260px;
}
table {
  border-top: 1px solid #e4e4e4;
  height: 100%;
}
td {
  border-bottom: 1px solid #e4e4e4;
  border-right: 1px solid #e4e4e4;
}
.colIcon {
  vertical-align: text-bottom;
}
</style>
